<div class="modal-header">
    <h4 class="modal-title">
        <span>{{ title }}</span>
        <button type="button" class="close hide-share-plugin" ng-click="cancel()">&times;</button>
    </h4>
</div>
<style>
    .cDrm-permission-container .btn-custom{
        background: #10adf3;
        border-color: #10adf3;
        color: #fff;
        border-radius: 0;
        outline: none !important;
    }
    .cDrm-permission-container .btn-default{
        border-radius: 0;
        outline: none !important;
    }
    .user-container{
        height: 150px;
        border: 1px solid #eee;
        position: relative;
    }
    .user-container .loading-container{
        position: absolute;
        left: 0;
        right: 0;
        top: 30px;
        bottom: 0;
        line-height: 100px;
        text-align: center;
    }
    .user-container .form-control{
        border-radius: 0;
        border: none;
        background: #f4f4f4;
        height: 30px;
    }
    .user-container ul {
        list-style: none;
        margin: 0;
        padding: 0;
        height: 120px;
        overflow-y: auto;
        overflow-x: hidden;
        width: 100%;
    }
    .user-container ul li{
        padding: 4px 12px;
    }
    .user-container ul li.active{
        background: #eaf8ff;
    }
    .perm-container{
        padding: 10px;
        border: 1px solid #eee;
    }
    .user-container li .fa{
        font-size: 16px;
    }
    .user-container li .fa-check-circle-o{
        color: #00b200;
    }
    .user-container li .fa-times-circle{
        /*color:#b00000;*/
    }
    .cDrm-permission-container label{
        font-size: 12px;
        font-weight: normal;
    }
    .cDrm-permission-container input.pull-left{
        height: 30px;
        padding: 6px 12px;
        width: 190px;
        margin-left: 10px;
        border-radius: 0;
        font-size: 14px;
        line-height: 1.42857143;
        color: #555;
        background-color: #fff;
        background-image: none;
        border: 1px solid #ccc;
        /* border-radius: 4px; */
        -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
        -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    }
    .span-title{
        height: 30px;
        display: inline-block;
        line-height: 30px;
    }
    .cDrm-permission-container .disabled{
        pointer-events: none;
    }
    .left-part-user-list:hover{
        background: #e9f8ff;
    }
    .error{
        border: 1px solid #b90000;
        outline: none;
    }
    input{
        outline: none !important;
    }
</style>
<div class="modal-body cDrm-permission-container">
    <div class="top-part user-list row">
        <div class="col-xs-6">
            <p>待选用户列表：</p>
            <div class="user-container">
                <i class="pos-abs fa fa-times-circle" ng-click="clearInput('searchText')" style="right: 6px;top: 8px;"></i>
                <input class="form-control b-r-0" type="text" ng-model="searchText" ng-keyup="handleKeyUp($event)" placeholder="输入用户邮箱或用户名">
                <ul>
                    <li>
                        <div class="row" style="position: relative;z-index: 2;">
                            <div class="col-xs-6 long-words-handle">{{ searchText }}</div>
                            <div class="col-xs-4 long-words-handle">{{ }}</div>
                            <div class="col-xs-2"><i ng-click="addNewUser(null,searchText)" ng-if="searchText && isValidInput" class="pull-right fa fa-plus-circle"></i></div>
                        </div>
                    </li>
                    <li class="left-part-user-list" ng-repeat="user in allUserList | filter:searchText" ng-click="addNewUser(user)" >
                        <div class="row">
                            <div class="col-xs-6 long-words-handle" title="{{ user.email }}">{{ user.email }}</div>
                            <div class="col-xs-4 long-words-handle">{{ user.full_name }}</div>
                            <div class="col-xs-2"><i ng-class="{'fa-check-circle-o':user.isSetPerm,'fa-circle-o':!user.isSetPerm}" class="pull-right fa "></i></div>
                        </div>
                    </li>
                    <li class="loading-container" ng-if="allUserList.length==0">
                        <span>{{ 'No Users' | translate }}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="col-xs-6">
            <p>已选用户列表：</p>
            <div class="user-container">
                <i class="pos-abs fa fa-times-circle" ng-click="clearInput('searchText2')" style="right: 6px;top: 8px;"></i>
                <input class="form-control b-r-0" type="text" ng-model="searchText2" placeholder="输入用户邮箱或用户名">
                <ul>
                    <li ng-click="chooseUser('anyone')" ng-class="{'active':anyoneUser.selected}">
                        <div class="row">
                            <div class="col-xs-6 long-words-handle">{{ 'anyone' | translate }}</div>
                            <div class="col-xs-4 long-words-handle"></div>
                            <div class="col-xs-2"><i ng-click="setReadPermTo(anyoneUser,true)" ng-class="{'fa-check-circle-o':anyoneUser.readPerm==='1'||anyoneUser.readPerm==='2','fa-circle-o':anyoneUser.readPerm==='0'}" class="pull-right fa "></i></div>
                        </div>
                    </li>
                    <li ng-click="chooseUser('enterpriseAllUsers')" ng-class="{'active':enterpriseAllUsers.selected}">
                        <div class="row">
                            <div class="col-xs-6 long-words-handle">{{ 'enterprise_all_users' | translate }}</div>
                            <div class="col-xs-4 long-words-handle"></div>
                            <div class="col-xs-2"><i ng-click="setReadPermTo(enterpriseAllUsers,true)" ng-class="{'fa-check-circle-o':enterpriseAllUsers.readPerm==='1'||enterpriseAllUsers.readPerm==='2','fa-circle-o':enterpriseAllUsers.readPerm==='0'}" class="pull-right fa "></i></div>
                        </div>
                    </li>
                    <li ng-repeat="user in users | filter:searchText2"
                        ng-click="chooseUser(user)"  ng-class="{'active':user.selected}"
                    >
                        <div class="row">
                            <div class="col-xs-6 long-words-handle" title="{{ user.name }}">{{ user.name }}</div>
                            <div class="col-xs-4 long-words-handle">{{ user.full_name }}</div>
                            <div ng-if="user.selected" class="col-xs-2"><i class="pull-right fa fa-times-circle" ng-click="deleteUser(user)"></i></div>
                        </div>
                    </li>
                </ul>
                <!--<div class="loading-container" ng-if="users.length==0">-->
                    <!--<i class="fa fa-spinner fa-pulse"></i>-->
                <!--</div>-->
            </div>
        </div>
    </div>
    <div class="down-part m-t-10" ng-if="currentUser!==null && currentUser.isValidInput">
        <p>设置权限：</p>
        <div class="perm-container">
            <div class="top-part row">
                <div class="col-xs-3">
                    <p>阅读：</p>
                    <label>
                        <input type="radio" ng-model="currentUser.readPerm" value="0" ng-change="setReadPermTo(currentUser)">
                        无
                    </label><br/>
                    <label>
                        <input type="radio" ng-model="currentUser.readPerm" value="1" ng-change="setReadPermTo(currentUser)">
                        全部
                    </label><br/>
                    <label>
                        <input type="radio" ng-model="currentUser.readPerm" value="2" ng-change="setReadPermTo(currentUser)">
                        指定页面：<span ng-if="pageCount">{{ 'total_page' | translate }} {{ pageCount }}</span>
                    </label>
                    <label ng-if="currentUser.readPerm==='2'">
                        <input ng-class="{'error':currentUser.errInput}" type="text" ng-model="currentUser.accessPagesStr" ng-keyup="checkIfValid()" placeholder="e.g 1-3,5-6">
                        <br>
                        <small class="text-danger">{{ currentUser.errMsg }}</small>
                    </label>


                </div>
                <div class="col-xs-3" ng-class="{'disabled':currentUser.readPerm==='0'||currentUser.readPerm==='2'}">
                    <p>{{ 'Copying' | translate }}：</p>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.copyCode" value="0">
                        {{ 'None' | translate }}
                    </label><br/>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.copyCode" value="200">
                        {{ 'Text access for the visually impaired' | translate }}
                    </label><br/>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.copyCode" value="210">
                        {{ 'Any' | translate }}
                    </label>
                </div>
                <div class="col-xs-3" ng-class="{'disabled':currentUser.readPerm==='0'||currentUser.readPerm==='2'}">
                    <p>{{ 'Editing' | translate }}：</p>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.editCode" value="0">
                        {{ 'None' | translate }}
                    </label><br/>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.editCode" value="400">
                        {{ 'Inserting, deleting, and rotating pages' | translate }}
                    </label><br/>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.editCode" value="100">
                        {{ 'Filling in forms and signing existing signature fields' | translate }}
                    </label>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.editCode" value="120">
                        {{ 'Commenting, filling form, signing existing signature fields' | translate }}
                    </label>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.editCode" value="128">
                        {{ 'Any except extracting pages' | translate }}
                    </label>
                </div>
                <div class="col-xs-3" ng-class="{'disabled':currentUser.readPerm==='0'||currentUser.readPerm==='2'}">
                    <p>{{ 'Printing' | translate }}：</p>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.printCode" value="0">
                        {{ 'None' | translate }}
                    </label><br/>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.printCode" value="4">
                        {{ 'Low Resolution' | translate }}
                    </label><br/>
                    <label>
                        <input type="radio" ng-model="currentUser.permData.printCode" value="804">
                        {{ 'High Resolution' | translate }}
                    </label>
                </div>
            </div>
            <div class="bottom-part m-t-10" ng-class="{'disabled':currentUser.readPerm==='0'}">
                <div class="clearfix">
                    <span class="pull-left span-title">控制设备数目：</span>
                    <!-- deviceLimit 0 off  -->
                    <!-- deviceLimit 3 on  -->
                    <button ng-click="changeDeviceLimit(0)" class="btn btn-sm pull-left " ng-class="{'btn-custom':currentUser.deviceLimit==0,'btn-default':currentUser.deviceLimit!=0}">关闭</button>
                    <button ng-click="changeDeviceLimit(3)" class="btn btn-sm pull-left " ng-class="{'btn-custom':currentUser.deviceLimit!=0,'btn-default':currentUser.deviceLimit==0}">开启</button>
                    <input class="pull-left" ng-if="currentUser.deviceLimit!=0" ng-model="currentUser.deviceLimit" type="text" placeholder="e.g. 7">
                </div>
                <div class="m-t-5 clearfix">
                    <span class="pull-left span-title">内容过期时间：</span>
                    <!-- 1 onlineDays-->
                    <!-- 2 onlineDate-->
                    <!-- 0 never-->
                    <button class="btn btn-sm pull-left " ng-click="changeOnlineType(0)" ng-class="{'btn-custom':currentUser.online==0,'btn-default':currentUser.online!=0}">不过期</button>
                    <button class="btn btn-sm pull-left " ng-click="changeOnlineType(2)"  ng-class="{'btn-custom':currentUser.online==2,'btn-default':currentUser.online!=2}">按日期</button>
                    <button class="btn btn-sm pull-left " ng-click="changeOnlineType(1)" ng-class="{'btn-custom':currentUser.online==1,'btn-default':currentUser.online!=1}">按天数</button>
                    <input class="pull-left" type="text" ng-if="currentUser.online==2" ng-model="currentUser.onlineDate" placeholder="e.g. 2020-01-01 09:00:00">
                    <input class="pull-left" type="text" ng-if="currentUser.online==1" ng-model="currentUser.onlineDays" placeholder="e.g. 7">
                </div>
                <div class="m-t-5 clearfix">
                    <!-- offline 2 always -->
                    <!-- offline: 0 never -->
                    <!-- offline: 1 days -->
                    <span class="pull-left span-title">允许离线访问：</span>
                    <button class="btn btn-sm pull-left " ng-click="changeOfflineType(0)" ng-class="{'btn-custom':currentUser.offline==0,'btn-default':currentUser.offline!=0}">从不</button>
                    <button class="btn btn-sm pull-left " ng-click="changeOfflineType(2)" ng-class="{'btn-custom':currentUser.offline==2,'btn-default':currentUser.offline!=2}">总是</button>
                    <button class="btn btn-sm pull-left " ng-click="changeOfflineType(1)" ng-class="{'btn-custom':currentUser.offline==1,'btn-default':currentUser.offline!=1}">按天数</button>
                    <input class="pull-left" type="text" ng-if="currentUser.offline==1" ng-model="currentUser.offlineDuration" placeholder="e.g. 7">
                </div>
            </div>
        </div>
    </div>
    <div class="footer-part clearfix m-t-10">
        <div ng-if="!justShowTemplate">
            <button ng-click="updateTemplate()" class="btn btn-custom pull-left">更新当前模版</button>
            <button ng-click="cancel()" class="m-l-5 btn btn-default pull-right">取消</button>
            <button class="btn btn-custom pull-right" ng-click="ok()">确定</button>
        </div>

        <div ng-if="justShowTemplate">
            <button ng-click="updateTemplate()" class="btn btn-custom pull-left">更新当前模版</button>
            <button ng-click="cancel()" class="m-l-5 btn btn-default pull-right">取消</button>
        </div>
    </div>
</div>